<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教师后台测试页面</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            margin: 20px;
            background: #f5f5f5;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .test-section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .success { background: #d4edda; border-color: #c3e6cb; }
        .error { background: #f8d7da; border-color: #f5c6cb; }
        .info { background: #d1ecf1; border-color: #bee5eb; }
        .warning { background: #fff3cd; border-color: #ffeaa7; }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover { background: #0056b3; }
        pre {
            background: #f8f9fa;
            padding: 10px;
            border-radius: 5px;
            overflow-x: auto;
            white-space: pre-wrap;
        }
        .status {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 3px;
            font-size: 12px;
            font-weight: bold;
        }
        .status.online { background: #28a745; color: white; }
        .status.offline { background: #dc3545; color: white; }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎯 教师管理后台诊断工具</h1>
        
        <div class="test-section info">
            <h3>📋 问题诊断</h3>
            <p><strong>问题：</strong>访问 <code>http://localhost:3000/teacher</code> 显示空白页面</p>
            <p><strong>原因：</strong>路由配置不匹配，正确地址应该是 <code>/teacher-dashboard</code></p>
            <p><strong>解决：</strong>已添加重定向路由，现在 <code>/teacher</code> 会自动跳转到 <code>/teacher-dashboard</code></p>
        </div>

        <div class="test-section">
            <h3>🔍 服务状态检查</h3>
            <p>前端服务: <span id="frontendStatus" class="status offline">检查中...</span></p>
            <p>后端服务: <span id="backendStatus" class="status offline">检查中...</span></p>
            <button onclick="checkServices()">重新检查服务状态</button>
        </div>

        <div class="test-section">
            <h3>🌐 访问链接</h3>
            <p><a href="http://localhost:3000/" target="_blank">📱 学生端首页</a></p>
            <p><a href="http://localhost:3000/teacher" target="_blank">👨‍🏫 教师后台 (新路由)</a></p>
            <p><a href="http://localhost:3000/teacher-dashboard" target="_blank">👨‍🏫 教师后台 (原路由)</a></p>
            <p><a href="http://localhost:8000/admin" target="_blank">👨‍💼 管理后台</a></p>
        </div>

        <div class="test-section">
            <h3>🔧 API测试</h3>
            <button onclick="testAPI()">测试教师后台API</button>
            <div id="apiResult"></div>
        </div>

        <div class="test-section">
            <h3>📊 教师后台功能说明</h3>
            <h4>教师管理后台包含以下功能：</h4>
            <ul>
                <li><strong>📊 整体概览</strong>：班级成绩统计、学生表现分析</li>
                <li><strong>👨‍🎓 学生分析</strong>：个人学习轨迹、详细数据分析</li>
                <li><strong>🔍 共性错题</strong>：高频错误分析、知识点薄弱环节</li>
                <li><strong>💡 教学建议</strong>：数据驱动的教学改进方案</li>
            </ul>
            
            <h4>使用步骤：</h4>
            <ol>
                <li>确保前后端服务都在运行</li>
                <li>访问 <code>http://localhost:3000/teacher</code> 或 <code>http://localhost:3000/teacher-dashboard</code></li>
                <li>选择班级和日期</li>
                <li>查看各种数据分析</li>
            </ol>
        </div>

        <div class="test-section">
            <h3>🚀 快速启动</h3>
            <p>如果服务未运行，请使用以下命令启动：</p>
            <pre>
# 方法1：使用优化后的启动脚本
restart.bat

# 方法2：使用增强版启动脚本
restart-enhanced.bat

# 方法3：使用开发版启动脚本
dev-start.bat
            </pre>
        </div>
    </div>

    <script>
        async function checkServices() {
            // 检查前端服务
            try {
                const frontendResponse = await fetch('http://localhost:3000/');
                document.getElementById('frontendStatus').textContent = '在线';
                document.getElementById('frontendStatus').className = 'status online';
            } catch (error) {
                document.getElementById('frontendStatus').textContent = '离线';
                document.getElementById('frontendStatus').className = 'status offline';
            }

            // 检查后端服务
            try {
                const backendResponse = await fetch('http://localhost:8000/api/questions');
                document.getElementById('backendStatus').textContent = '在线';
                document.getElementById('backendStatus').className = 'status online';
            } catch (error) {
                document.getElementById('backendStatus').textContent = '离线';
                document.getElementById('backendStatus').className = 'status offline';
            }
        }

        async function testAPI() {
            const resultDiv = document.getElementById('apiResult');
            resultDiv.innerHTML = '<p>正在测试API...</p>';

            try {
                // 测试班级分析API
                const response = await fetch('http://localhost:8000/api/class-analysis/1');
                
                if (response.ok) {
                    const data = await response.json();
                    resultDiv.innerHTML = `
                        <div class="success">
                            <h4>✅ API测试成功</h4>
                            <p>成功获取班级1的数据</p>
                            <pre>${JSON.stringify(data, null, 2)}</pre>
                        </div>
                    `;
                } else {
                    resultDiv.innerHTML = `
                        <div class="warning">
                            <h4>⚠️ API响应异常</h4>
                            <p>状态码: ${response.status}</p>
                            <p>可能原因: 没有数据或服务配置问题</p>
                        </div>
                    `;
                }
            } catch (error) {
                resultDiv.innerHTML = `
                    <div class="error">
                        <h4>❌ API测试失败</h4>
                        <p>错误: ${error.message}</p>
                        <p>请确保后端服务正在运行 (http://localhost:8000)</p>
                    </div>
                `;
            }
        }

        // 页面加载时自动检查服务状态
        window.onload = function() {
            checkServices();
        };
    </script>
</body>
</html>
